<!DOCTYPE html>
<html>
  <head>
    <title>three.proton - eightdiagrams</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <style type="text/css">
      body {
        font-family: Monospace;
        background-color: #fff;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <script src="../lib/three.min.js"></script>
    <script src="../lib/require.js"></script>
    <script src="../lib/config.js"></script>
    <script src="./js/lib/TrackballControls.js"></script>
    <script>
      var proton, emitter, R, particles;
      var camera, scene, renderer, clock;

      function init() {
        addScene();
        addLights();
        addStars();
        addProton();
        animate();
      }

      function addScene() {
        camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.z = 500;
        scene = new THREE.Scene();
        scene.fog = new THREE.Fog(0xffffff, 1, 10000);

        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        window.addEventListener("resize", onWindowResize, false);
      }

      function addLights() {
        var ambientLight = new THREE.AmbientLight(0x101010);
        scene.add(ambientLight);

        var pointLight = new THREE.PointLight(0xffffff, 2, 1000, 1);
        pointLight.position.set(0, 200, 200);
        scene.add(pointLight);
      }

      function addStars() {
        var geometry = new THREE.Geometry();
        for (var i = 0; i < 10000; i++) {
          var vertex = new THREE.Vector3();
          vertex.x = THREE.Math.randFloatSpread(2000);
          vertex.y = THREE.Math.randFloatSpread(2000);
          vertex.z = THREE.Math.randFloatSpread(2000);
          geometry.vertices.push(vertex);
        }

        particles = new THREE.Points(
          geometry,
          new THREE.PointsMaterial({
            color: 0x888888
          })
        );

        scene.add(particles);
      }

      function addProton() {
        proton = new Proton();
        emitter = new Proton.FollowEmitter();
        emitter.rate = new Proton.Rate(new Proton.Span(5, 7), new Proton.Span(0.01, 0.02));
        emitter.addInitialize(new Proton.Mass(1));
        emitter.addInitialize(new Proton.Life(2));
        emitter.addInitialize(new Proton.Body(createSprite()));
        emitter.addInitialize(new Proton.Radius(40));
        emitter.addInitialize(new Proton.V(200, new Proton.Vector3D(0, 0, -1), 0));

        emitter.addBehaviour(new Proton.Alpha(1, 0));
        emitter.addBehaviour(new Proton.Color("#4F1500", "#0029FF"));
        emitter.addBehaviour(new Proton.Scale(1, 0.5));
        emitter.addBehaviour(new Proton.CrossZone(new Proton.ScreenZone(camera, renderer), "dead"));

        emitter.addBehaviour(new Proton.Force(0, 0, -20));
        emitter.setCameraAndRenderer(camera, renderer);

        emitter.emit();

        proton.addEmitter(emitter);
        proton.addRender(new Proton.SpriteRender(scene));
      }

      function createSprite() {
        var map = new THREE.TextureLoader().load("./img/dot.png");
        var material = new THREE.SpriteMaterial({
          map: map,
          color: 0xff0000,
          blending: THREE.AdditiveBlending,
          fog: true
        });
        return new THREE.Sprite(material);
      }

      function animate() {
        requestAnimationFrame(animate);
        render();
      }

      function render() {
        proton.update();
        renderer.render(scene, camera);
        camera.lookAt(scene.position);
        particles.rotation.y += 0.01;

        Proton.Debug.renderInfo(proton, 3);
      }

      function onWindowResize() {}
    </script>
  </body>
</html>
